<template>
  <view class="text-item">
    <view v-if="type === 'uniline'" class="uniline" :style="{ borderBottom }">
      <view class="label">{{ label }}</view>
      <view class="value">{{ value || '-' }}</view>
    </view>
    <view
      v-else="type === 'double' && isArray(label) && isArray(value)"
      class="double"
      :style="{ borderBottom }"
    >
      <view class="double-item">
        <view class="label">{{ label?.[0] }}</view>
        <view class="value">{{ value?.[0] || '-' }}</view>
      </view>
      <view class="line"></view>
      <view class="double-item">
        <view class="label">{{ label?.[1] }}</view>
        <view class="value">{{ value?.[1] || '-' }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { isArray } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';
  import { PropType } from 'vue';

  defineProps({
    /** 单行 | 双行 */
    type: String as PropType<'uniline' | 'double'>,
    label: [String, Array],
    value: [String, Array],
    borderBottom: propTypes.string.def('1px solid #DDD'),
  });
</script>

<style lang="scss" scoped>
  .text-item {
    padding: 0 30rpx;
    background-color: #fff;
    .label {
      font-size: 24rpx;
      color: #808080;
      margin-bottom: 16rpx;
    }
    .value {
      font-size: 28rpx;
      color: #333;
    }
    .uniline,
    .double {
      padding: 30rpx 0;
    }
    .double {
      display: flex;
      &-item {
        flex: 1;
      }
      .line {
        width: 1px;
        background-color: #ddd;
        margin: 0 30rpx;
      }
    }
  }
</style>
